<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets" 
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:t="https://code.google.com/p/rad-framework/taglib" 
	xmlns:rich="http://richfaces.ajax4jsf.org/rich"
	xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" 
	xmlns:s="http://jboss.com/products/seam/taglib">

	<t:table cellspacing="12" width="100%">
		<t:tr>
			<t:td valign="top" width="40%">
				<a4j:form id="taskCommentForm">
					<h:panelGrid rendered="#{!currentTask.complete}" width="50%">
						<h:outputLabel value="#{messages['Comment']}"
							styleClass="rad-framework-form-label" />
						<rich:editor value="#{taskCommentAction.comment}" id="comment"
							width="400" height="200" theme="advanced">
							<f:param name="theme_advanced_resizing" value="true" />
							<f:param name="theme_advanced_toolbar_location" value="top" />
							<f:param name="theme_advanced_toolbar_align" value="left" />
							<f:param name="theme_advanced_statusbar_location" value="bottom" />
							<f:param name="theme_advanced_path" value="false" />
							<f:param name="theme_advanced_buttons1"
								value="formatselect,bold,italic,underline,|,undo,redo,|,bullist,numlist,outdent,indent" />
							<f:param name="theme_advanced_buttons2" value="" />
							<f:param name="theme_advanced_buttons3" value="" />
						</rich:editor>
						<h:panelGroup>
							<a4j:commandLink id="addComment" reRender="taskTP"
								eventsQueue="viewQ" action="#{taskCommentAction.saveComment}"
								styleClass="rad-framework-button-content">
								<span>
									<h:outputText value="#{messages['Add']} #{messages['Comment']}" />
								</span>
							</a4j:commandLink>
						</h:panelGroup>
					</h:panelGrid>
				</a4j:form>
			</t:td>
			<t:td valign="top" width="60%">
				<rich:dataTable id="comments" value="#{taskCommentAction.comments}"
					var="row" rendered="#{not empty taskCommentAction.comments}" width="100%">

					<ui:remove>
						<f:facet name="header">
							<rich:columnGroup>
								<h:column>
									<h:outputText value="#{messages['Task_comments']}" />
								</h:column>
							</rich:columnGroup>
						</f:facet>
					</ui:remove>

					<h:column>
						<h:panelGrid columns="4">
							<h:outputText value="#{row.user}" styleClass="rad-framework-form-label" />
							<h:outputText value=" (" />
							<h:outputText value="#{row.timestamp}">
								<f:convertDateTime type="time"
									pattern="#{messages['TimePattern']}" />
							</h:outputText>
							<h:outputText value=")" />
						</h:panelGrid>
						<h:outputText escape="false" value="#{row.text}" />
					</h:column>
				</rich:dataTable>

				<rich:jQuery selector="#comments tr:odd" query="addClass('rad-framework-row-odd')" />
				<rich:jQuery selector="#comments tr:even" query="addClass('rad-framework-row-even')" />
				<rich:jQuery selector="#comments tr"
					query="mouseover(function(){jQuery(this).addClass('rad-framework-row-over')})" />
				<rich:jQuery selector="#comments tr"
					query="mouseout(function(){jQuery(this).removeClass('rad-framework-row-over')})" />

			</t:td>
		</t:tr>
	</t:table>

</ui:composition>